<template>
  <div class="expense_add">
    <div class="add_con">
      <div class="add_head">
        <div class="add_title">
          <span>差旅费报销单</span>
        </div>
      </div>
      <div class="add_table" ref="add_table">
        <div class="add_tab">
          <div class="table_line line_th">
            <div class="table_tit">姓名</div>
            <div class="table_con">{{ auditForm.userName }}</div>
            <div class="table_tit">部门</div>
            <div class="table_con">{{ auditForm.orgName }}</div>
            <div class="table_tit">职务</div>
            <div class="table_con">{{ auditForm.post }}</div>
          </div>
          <div class="table_line">
            <div class="table_tit">关联单据</div>
            <div class="table_con con_all con_trans">
              <div class="info_btn" @click="goLink" v-if="!linkForm">
                <i class="iconfont icon24px"></i>
                关联申请单
              </div>
              <template v-if="linkForm">
                <div class="info_detail">
                  <span>{{ auditForm.associatedFormName }}</span>
                </div>
                <div
                  class="info_del el-icon-circle-close"
                  @click="deleteLink"
                  v-if="auditForm.saveStatus !== '1'"></div>
              </template>
            </div>
          </div>
          <div class="table_line">
            <div class="table_tit">证明人</div>
            <div class="table_con con_all con_trans">
              <el-select
                v-model="auditForm.certifierList"
                filterable
                placeholder="请选择"
                value-key="certifierId"
                multiple
                :disabled="auditForm.status === '3'">
                <el-option
                  v-for="item in selectUserList"
                  :key="item.certifierId"
                  :label="item.certifier"
                  :value="item"></el-option>
              </el-select>
            </div>
          </div>
          <div class="table_line">
            <div class="table_tit">交通工具</div>
            <div class="table_con con_all con_trans">
              <el-radio-group v-model="auditForm.transportation">
                <el-radio label="1">公共交通-火车/高铁/客车/飞机</el-radio>
                <el-radio label="2">公车</el-radio>
                <el-radio label="3">平台租赁</el-radio>
                <el-radio label="4">其他(请注明)</el-radio>
              </el-radio-group>
              <el-input
                class="week_input"
                placeholder="请注明其他"
                v-model="auditForm.transportationRemark"
                size="mini"
                v-if="auditForm.transportation === '4'"
                maxlength="20"></el-input>
            </div>
          </div>
          <div class="table_line">
            <div class="table_tit">出差事由</div>
            <div class="table_con con_all">
              <el-input
                type="textarea"
                placeholder="请输入"
                v-model="auditForm.reimburseReason"
                maxlength="50"></el-input>
            </div>
          </div>
          <div class="table_act">
            <div class="table_line">
              <div class="table_tit">起程时间</div>
              <div class="table_con">
                <el-date-picker
                  v-model="auditForm.startTime"
                  type="datetime"
                  placeholder="选择起程时间"
                  :picker-options="pickerOptionsStart"
                  format="yyyy-MM-dd HH:mm"
                  popper-class="no-atTheMoment"
                  :clearable="false"></el-date-picker>
              </div>
              <div class="table_tit">离开时间</div>
              <div class="table_con">
                <el-date-picker
                  v-model="auditForm.endTime"
                  type="datetime"
                  :placeholder="auditForm.startTime ? '选择离开时间' : '请先选择起程时间'"
                  :picker-options="pickerOptionsEnd"
                  format="yyyy-MM-dd HH:mm"
                  :disabled="auditForm.startTime ? false : true"
                  popper-class="no-atTheMoment"
                  :clearable="false"></el-date-picker>
              </div>
            </div>
            <div class="table_line">
              <div class="table_tit">出发地</div>
              <div class="table_con">
                <el-input
                  class="week_input"
                  placeholder="请输入"
                  v-model="auditForm.startPlace"
                  maxlength="10"></el-input>
              </div>
              <div class="table_tit">目的地</div>
              <div class="table_con">
                <el-input
                  class="week_input"
                  placeholder="请输入"
                  v-model="auditForm.leavePlace"
                  maxlength="10"></el-input>
              </div>
            </div>
            <div class="table_line bill_head">
              <div class="table_t1">
                <div class="table_t2">
                  <div class="table_tit">车船费</div>
                </div>
                <div class="table_t2">
                  <div class="table_tit">单据张数</div>
                  <div class="table_tit">金额</div>
                </div>
              </div>
              <div class="table_t1">
                <div class="table_t2">
                  <div class="table_tit">住宿费</div>
                </div>
                <div class="table_t2">
                  <div class="table_tit">单据张数</div>
                  <div class="table_tit">金额</div>
                </div>
              </div>
              <div class="table_t1">
                <div class="table_t2">
                  <div class="table_tit">伙食补助/交通补助</div>
                </div>
                <div class="table_t2">
                  <div class="table_tit">天数</div>
                  <div class="table_tit">金额</div>
                </div>
              </div>
              <div class="table_t1">
                <div class="table_t2">
                  <div class="table_tit">其他费用</div>
                </div>
                <div class="table_t2">
                  <div class="table_tit">单据张数</div>
                  <div class="table_tit">金额</div>
                </div>
              </div>
              <div class="table_t1 t1_last">
                <div class="table_tit">单据张数</div>
                <div class="table_tit">总计金额</div>
              </div>
            </div>
            <div class="table_line bill_con">
              <div class="bill_only">
                <div class="table_con">
                  <el-input
                    class="week_input"
                    placeholder="请输入"
                    v-model="auditForm.expenseList[0].billCount"
                    @keyup.native="handleInput($event, 0)"
                    maxlength="10"></el-input>
                </div>
                <div class="table_con">
                  <el-input
                    class="week_input"
                    placeholder="请输入"
                    v-model="auditForm.expenseList[0].amount"
                    @keyup.native="handleInput($event, 2)"
                    maxlength="10"></el-input>
                </div>
                <div class="table_con">
                  <el-input
                    class="week_input"
                    placeholder="请输入"
                    v-model="auditForm.expenseList[1].billCount"
                    @keyup.native="handleInput($event, 0)"
                    maxlength="10"></el-input>
                </div>
                <div class="table_con">
                  <el-input
                    class="week_input"
                    placeholder="请输入"
                    v-model="auditForm.expenseList[1].amount"
                    @keyup.native="handleInput($event, 2)"
                    maxlength="10"></el-input>
                </div>
                <div class="table_con">
                  <el-input
                    class="week_input"
                    placeholder="请输入"
                    v-model="auditForm.expenseList[2].dayCount"
                    @keyup.native="handleInput($event, 1)"
                    maxlength="5"></el-input>
                </div>
                <div class="table_con">
                  <el-input
                    class="week_input"
                    placeholder="请输入"
                    v-model="auditForm.expenseList[2].amount"
                    @keyup.native="handleInput($event, 2)"
                    maxlength="10"></el-input>
                </div>
                <div class="table_con">
                  <el-input
                    class="week_input"
                    placeholder="请输入"
                    v-model="auditForm.expenseList[3].billCount"
                    @keyup.native="handleInput($event, 0)"
                    maxlength="10"></el-input>
                </div>
                <div class="table_con">
                  <el-input
                    class="week_input"
                    placeholder="请输入"
                    v-model="auditForm.expenseList[3].amount"
                    @keyup.native="handleInput($event, 2)"
                    maxlength="10"></el-input>
                </div>
              </div>
              <div class="bill_all">
                <div class="table_con">
                  <div class="week_input">{{ totalSumOnly('0') }}</div>
                </div>
                <div class="table_con">
                  <div class="week_input">{{ totalSumOnly('1') }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="add_extra">
          <div class="add_bill" v-if="billAmount">
            <div class="add_label">
              <span>*</span>
              发票信息：
            </div>
            <div class="annex_box">
              <div class="annex_li" v-if="auditForm.expenseList[0].billCount">
                <div class="annex_label">车船费：</div>
                <div class="annex_upload">
                  <UploadFile
                    :file-list="auditForm.fareList"
                    accept=".jpeg,.png,.jpg"
                    btnName="上传发票"
                    layout="block"></UploadFile>
                </div>
              </div>
              <div class="annex_li" v-if="auditForm.expenseList[1].billCount">
                <div class="annex_label">住宿费：</div>
                <div class="annex_upload">
                  <UploadFile
                    :file-list="auditForm.hotelList"
                    accept=".jpeg,.png,.jpg"
                    btnName="上传发票"
                    layout="block"></UploadFile>
                </div>
              </div>
              <div class="annex_li" v-if="auditForm.expenseList[3].billCount">
                <div class="annex_label">其他费用：</div>
                <div class="annex_upload">
                  <UploadFile
                    :file-list="auditForm.otherExpenseList"
                    accept=".jpeg,.png,.jpg"
                    btnName="上传发票"
                    layout="block"></UploadFile>
                </div>
              </div>
            </div>
          </div>
          <div class="add_annex">
            <div class="add_label">附件：</div>
            <div class="annex_upload">
              <UploadFile :file-list="auditForm.enclosureList"></UploadFile>
            </div>
          </div>
        </div>
      </div>
      <div class="btn_save">
        <el-button class="btnBorder" @click="cancelData">取 消</el-button>
        <el-button class="btnBg" type="primary" @click="saveData('0')" v-if="auditForm.saveStatus !== '1'">
          暂 存
        </el-button>
        <el-button class="btnBg" type="primary" @click="saveData('1')">提 交</el-button>
      </div>
    </div>
    <XnDialog
      title="关联申请单"
      :visible.sync="linkDiaShow"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="60%"
      top="5vh"
      left="10vw"
      class="branch_dialog"
      append-to-body
      @closed="linkDiaShow = false">
      <AuditLink v-if="linkDiaShow" @linkSuccess="linkSuccess" @cancelLink="cancelLink" />
    </XnDialog>
  </div>
</template>

<script>
import {
  addTripReimburse,
  updateTripReimburse,
  checkIsCanRelated,
  getTripReimburseDetail,
} from '@apis/api-dailyManage.js'
import moment from 'moment'
import { handleInput } from '@utility/utility.js'
import UploadFile from '@com/UploadFile'
import AuditLink from './AuditLink'
import XnDialog from '@com/xnDialog.vue'
export default {
  components: {
    UploadFile,
    AuditLink,
    XnDialog,
  },
  props: {
    userAllList: {
      type: Array,
      default: () => [],
    },
    formData: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    pickerOptionsStart() {
      const end = moment(this.auditForm.endTime)
      if (this.auditForm.endTime) {
        return {
          disabledDate(time) {
            return moment(time).format('YYYYMMDDHHmm') > end.format('YYYYMMDDHHmm')
          },
        }
      } else {
        return {}
      }
    },
    pickerOptionsEnd() {
      const start = moment(this.auditForm.startTime)
      return {
        disabledDate(time) {
          return moment(time).format('YYYYMMDDHHmm') < start.format('YYYYMMDDHHmm')
        },
      }
    },
    billAmount() {
      if (
        this.auditForm.expenseList[0].billCount ||
        this.auditForm.expenseList[1].billCount ||
        this.auditForm.expenseList[3].billCount
      ) {
        return true
      } else {
        return false
      }
    },
  },
  watch: {},
  data() {
    return {
      moment: moment,
      auditForm: {
        id: '',
        formTitle: '差旅费报销单',
        formType: '2',
        certifierList: [
          // {
          //   userName: '',
          //   userId: '',
          // },
        ],
        billCount: '',
        transportation: '',
        transportationRemark: '',
        reimburseReason: '',
        startTime: '',
        endTime: '',
        startPlace: '',
        leavePlace: '',
        expenseList: [
          {
            amount: '',
            billCount: '',
            expenseType: '1',
          },
          {
            amount: '',
            billCount: '',
            expenseType: '2',
          },
          {
            amount: '',
            dayCount: '',
            expenseType: '3',
          },
          {
            amount: '',
            billCount: '',
            expenseType: '4',
          },
        ],
        amountTotal: '',
        userId: localStorage.pskh_userId,
        userName: JSON.parse(localStorage.PSKH_USERINFO).userName,
        orgId: JSON.parse(localStorage.PSKH_USERINFO).loginPostInfo.orgId,
        orgName: JSON.parse(localStorage.PSKH_USERINFO).loginPostInfo.orgName,
        post: JSON.parse(localStorage.PSKH_USERINFO).loginPostInfo.postName,
        enclosureList: [], // 附件
        fareList: [], // 车船费
        hotelList: [], // 住宿费
        otherExpenseList: [], // 其他费用
        associatedForm: '', // 关联单据ID
        associatedFormName: '',
        relatedAccompanyList: [], // 关联单据陪同人员信息
      },
      handleInput,
      userAOptions: [],
      linkDiaShow: false,
      linkForm: false,
      selectUserList: [],
    }
  },
  created() {},
  mounted() {
    const userArr = []
    const list = JSON.parse(JSON.stringify(this.userAllList))
    list.forEach(item => {
      userArr.push({
        certifierId: item.userId,
        certifier: item.userName,
        certifierPost: item.post || '',
      })
    })
    this.userAOptions = userArr
    this.selectUserList = userArr
    if (this.formData.id) {
      this.auditForm = JSON.parse(JSON.stringify(this.formData))
      if (this.auditForm.associatedForm) {
        this.linkForm = true
      }
      if (this.auditForm.relatedAccompanyList.length) {
        const arr = []
        this.auditForm.relatedAccompanyList.forEach(item => {
          arr.push({
            certifierId: item.accompanyId,
            certifier: item.accompanyName,
            certifierPost: item.accompanyPost || '',
          })
        })
        this.selectUserList = arr
      }
    }
  },
  methods: {
    cancelData() {
      this.$emit('cancelData')
    },
    saveData(type) {
      if (type === '1') {
        if (!this.auditForm.transportation) {
          return this.$message.warning('请选择交通工具')
        }
        if (this.auditForm.transportation === '4' && !this.auditForm.transportationRemark.trim().length) {
          return this.$message.warning('请注明其他类型交通工具')
        }
        if (!this.auditForm.reimburseReason.trim().length) {
          return this.$message.warning('请输入出差事由')
        }
        if (!this.auditForm.startTime) {
          return this.$message.warning('请选择起程时间')
        }
        if (!this.auditForm.endTime) {
          return this.$message.warning('请选择离开时间')
        }
        if (!this.auditForm.startPlace.trim().length) {
          return this.$message.warning('请输入出发地')
        }
        if (!this.auditForm.leavePlace.trim().length) {
          return this.$message.warning('请输入目的地')
        }
        if (!this.auditForm.amountTotal) {
          return this.$message.warning('请填写相关费用信息')
        }
        for (let i = 0; i < 4; i++) {
          const el = this.auditForm.expenseList[i]
          if (el.amount && ((!el.billCount && i !== 2) || (!el.dayCount && i === 2))) {
            return this.$message.warning('请填写完整的费用信息')
          }
          if (!el.amount && ((el.billCount && i !== 2) || (el.dayCount && i === 2))) {
            return this.$message.warning('请填写完整的费用信息')
          }
        }

        if (this.auditForm.expenseList[0].amount && !this.auditForm.fareList.length) {
          return this.$message.warning('请上传车船费相关发票信息附件图片')
        }
        if (this.auditForm.expenseList[1].amount && !this.auditForm.hotelList.length) {
          return this.$message.warning('请上传住宿费相关发票信息附件图片')
        }
        if (this.auditForm.expenseList[3].amount && !this.auditForm.otherExpenseList.length) {
          return this.$message.warning('请上传其他费用相关发票信息附件图片')
        }
        if (!this.auditForm.expenseList[0].amount) {
          this.auditForm.fareList = []
        }
        if (!this.auditForm.expenseList[1].amount) {
          this.auditForm.hotelList = []
        }
        if (!this.auditForm.expenseList[3].amount) {
          this.auditForm.otherExpenseList = []
        }
      }
      const param = {
        ...this.auditForm,
        startTime: this.auditForm.startTime ? moment(this.auditForm.startTime).format('YYYY-MM-DD HH:mm:ss') : '',
        endTime: this.auditForm.endTime ? moment(this.auditForm.endTime).format('YYYY-MM-DD HH:mm:ss') : '',
        year: moment().format('YYYY'),
        saveStatus: type,
        transportationRemark: this.auditForm.transportation === '4' ? this.auditForm.transportationRemark : '',
      }
      if (type === '1') {
        if (this.auditForm.associatedForm && this.auditForm.saveStatus !== '1') {
          checkIsCanRelated({
            id: this.auditForm.associatedForm,
          }).then(res => {
            if (res.data === '1') {
              this.dialogTip(type, param)
            } else {
              this.$alert('出差前审批单已被关联，请选择其他表单', '提示', {
                confirmButtonText: '确定',
              })
            }
          })
        } else {
          this.dialogTip(type, param)
        }
      } else {
        this.submitForm(type, param)
      }
    },
    removeHtmlStyle(html) {
      const rel = /style\s*?=\s*?([‘"])[\s\S]*?\1/g
      let newHtml = ''
      if (html) {
        newHtml = html.replace(rel, '')
      }
      return newHtml
    },
    totalSumOnly(type) {
      if (type === '0') {
        const billCount1 = Number(this.auditForm.expenseList[0].billCount)
        const billCount2 = Number(this.auditForm.expenseList[1].billCount)
        const billCount3 = Number(this.auditForm.expenseList[3].billCount)
        this.auditForm.billCount = billCount1 + billCount2 + billCount3 || 0
        return this.auditForm.billCount
      } else {
        const amountTotal1 = Math.floor(Number(this.auditForm.expenseList[0].amount) * 100) || 0
        const amountTotal2 = Math.floor(Number(this.auditForm.expenseList[1].amount) * 100) || 0
        const amountTotal3 = Math.floor(Number(this.auditForm.expenseList[2].amount) * 100) || 0
        const amountTotal4 = Math.floor(Number(this.auditForm.expenseList[3].amount) * 100) || 0
        const amountTotal = amountTotal1 + amountTotal2 + amountTotal3 + amountTotal4
        this.auditForm.amountTotal = amountTotal / 100
        return this.auditForm.amountTotal
      }
    },
    submitForm(type, param) {
      if (this.formData.id) {
        updateTripReimburse(param).then(res => {
          if (res.code === 0) {
            if (type === '0') {
              this.$message.success('暂存成功')
            } else {
              this.$message.success('提交成功')
            }
            this.$emit('addSuccess', type)
          }
        })
      } else {
        addTripReimburse(param).then(res => {
          if (res.code === 0) {
            if (type === '0') {
              this.$message.success('暂存成功')
            } else {
              this.$message.success('提交成功')
            }
            this.$emit('addSuccess', type)
          }
        })
      }
    },
    goLink() {
      this.linkDiaShow = true
    },
    cancelLink() {
      this.linkDiaShow = false
    },
    linkSuccess(dataLink) {
      this.auditForm.associatedForm = dataLink.id
      this.auditForm.associatedFormName = dataLink.reimburseReason + ' （' + dataLink.reimburseTime + '）'
      this.linkDiaShow = false
      this.linkForm = true
      this.getTripReimburseDetail(dataLink.id)
    },
    deleteLink() {
      this.auditForm = {
        id: this.auditForm.id || '',
        formTitle: '差旅费报销单',
        formType: '2',
        certifierList: [],
        billCount: '',
        transportation: '',
        transportationRemark: '',
        reimburseReason: '',
        startTime: '',
        endTime: '',
        startPlace: '',
        leavePlace: '',
        expenseList: [
          {
            amount: '',
            billCount: '',
            expenseType: '1',
          },
          {
            amount: '',
            billCount: '',
            expenseType: '2',
          },
          {
            amount: '',
            dayCount: '',
            expenseType: '3',
          },
          {
            amount: '',
            billCount: '',
            expenseType: '4',
          },
        ],
        amountTotal: '',
        userId: localStorage.pskh_userId,
        userName: JSON.parse(localStorage.PSKH_USERINFO).userName,
        orgId: JSON.parse(localStorage.PSKH_USERINFO).loginPostInfo.orgId,
        orgName: JSON.parse(localStorage.PSKH_USERINFO).loginPostInfo.orgName,
        post: JSON.parse(localStorage.PSKH_USERINFO).loginPostInfo.postName,
        enclosureList: [], // 附件
        fareList: [], // 车船费
        hotelList: [], // 住宿费
        otherExpenseList: [], // 其他费用
        associatedForm: '', // 关联单据ID
        associatedFormName: '',
        relatedAccompanyList: [],
      }
      this.linkForm = false
    },
    getTripReimburseDetail(id) {
      getTripReimburseDetail({
        id: id,
      }).then(res => {
        if (res.code === 0) {
          const data = res.data
          const userArr = []
          if (data.accompanyList.length) {
            data.accompanyList.forEach(item => {
              userArr.push({
                certifierId: item.accompanyId,
                certifier: item.accompanyName,
                certifierPost: item.accompanyPost || '',
              })
            })
          }
          this.auditForm.certifierList = userArr
          if (data.accompanyList.length) {
            this.selectUserList = userArr
          }
          this.auditForm.transportation = data.transportation
          this.auditForm.transportationRemark = data.transportationRemark
          this.auditForm.reimburseReason = data.reimburseReason
          this.auditForm.startTime = data.startTime
          this.auditForm.endTime = data.endTime
          this.auditForm.startPlace = data.startPlace
          this.auditForm.leavePlace = data.leavePlace
          this.auditForm.relatedAccompanyList = data.accompanyList || []
        }
      })
    },
    dialogTip(type, param) {
      this.$confirm('请确认当前报销金额与票据数量是否正确，确定后不可修改。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.submitForm(type, param)
        })
        .catch(() => {})
    },
  },
}
</script>

<style lang="scss" scoped>
.expense_add {
  width: 100%;
  height: 100%;
  font-size: 14px;
  .add_con {
    flex: 1;
    padding: 0 50px;
    .add_head {
      .add_title {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        color: #333333;
      }
    }
    .add_table {
      max-height: 60vh;
      overflow-y: auto;
      .add_tab {
        margin-top: 15px;
        border-top: 1px solid #d0d7e0;
        border-left: 1px solid #d0d7e0;
        .table_line {
          display: flex;
          align-items: stretch;
          justify-content: space-around;
          color: #333333;
          .table_tit {
            padding: 15px 0;
            font-weight: 600;
            font-size: 15px;
            background-color: #e9eff48f;
            .el-icon-info {
              color: #999999;
              margin-left: 5px;
            }
          }
          .table_tit,
          .table_con {
            width: 25%;
            border-right: 1px solid #d0d7e0;
            border-bottom: 1px solid #d0d7e0;
            display: flex;
            align-items: center;
            justify-content: center;
            /deep/.el-input {
              font-size: inherit !important;
            }
            /deep/.el-textarea {
              font-size: inherit !important;
            }
          }
          .con_all {
            width: 75%;
            justify-content: start;
            /deep/.el-radio__label {
              font-size: 14px !important;
            }
          }
          .con_trans {
            flex-wrap: wrap;
            position: relative;
            .el-radio-group {
              padding: 10px 0;
            }
            .week_input {
              width: 100%;
              border: 1px solid #d0d7e0;
              margin: 0 10px 10px;
            }
            .el-select {
              flex: 1;
            }
            .link_info {
              margin-left: 10px;
              flex: 1;
              position: relative;
            }
            .info_btn {
              border: 1px dashed #d0d7e0;
              color: #4099ff;
              padding: 8px 80px;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              width: 98%;
              margin: 0 1%;
              .iconfont {
                margin-right: 10px;
              }
            }
            .info_detail {
              // border: 1px dashed #d0d7e0;
              padding: 8px;
              width: 100%;
              padding-right: 40px;
            }
            .info_del {
              position: absolute;
              right: 10px;
              top: 50%;
              transform: translateY(-50%);
              font-size: 15px;
              color: #999999;
              cursor: pointer;
            }
          }
          .el-date-editor {
            width: 100%;
            height: 100%;
          }
          .el-radio {
            margin-left: 10px;
          }
          /deep/.el-input__inner {
            border: none;
            border-radius: 0;
            width: 100%;
          }
          /deep/.el-textarea__inner {
            border: none;
            border-radius: 0;
            width: 100%;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑',
              Arial, sans-serif;
          }
          /deep/.el-select {
            height: 100%;
            .el-input {
              height: 100%;
              .el-input__inner {
                height: 100%;
                text-align: center;
              }
            }
          }
          /deep/.el-date-editor {
            .el-input__inner {
              height: 100%;
            }
          }
          /deep/ .el-textarea__inner {
            border: none;
            border-radius: 0;
            width: 100%;
          }
          .radio {
            padding: 0 10px;
          }
        }
        .table_act {
          position: relative;
          .icon_box {
            position: absolute;
            right: -35px;
            top: 50%;
            transform: translateY(-50%);
            color: #4a79ba;
            font-size: 30px;
            display: flex;
            flex-direction: column;
            cursor: pointer;
            span {
              margin: 5px 0;
            }
          }
          .bill_head {
            .table_t1 {
              width: 20%;
              .table_t2 {
                display: flex;
                align-items: center;
                .table_tit {
                  flex: 1;
                }
              }
            }
            .t1_last {
              display: flex;
              align-items: center;
              .table_tit {
                height: 100%;
                width: 50%;
              }
            }
          }
          .bill_con {
            display: flex;
            .bill_only {
              width: 80%;
              display: flex;
              align-items: stretch;
              .table_con {
                flex: 1;
                min-height: 50px;
              }
            }
            .bill_all {
              width: 20%;
              display: flex;
              align-items: stretch;
              .table_con {
                width: 50%;
                height: 100%;
                color: #999999;
              }
            }
          }
        }
        .table_total {
          .table_tit {
            width: 100%;
          }
          .bill_con {
            display: flex;
            .bill_only {
              width: 80%;
              display: flex;
              align-items: stretch;
              .table_con {
                flex: 1;
              }
            }
            .bill_all {
              width: 20%;
              .table_con {
                width: 100%;
              }
            }
            .table_con {
              padding: 15px 0;
            }
          }
        }
      }
      .add_extra {
        margin-top: 15px;
        color: #333333;
        .add_label {
          font-weight: 600;
          font-size: 16px;
          span {
            color: #d9001b;
          }
        }
        .annex_label {
          font-weight: 600;
          font-size: 14px;
        }
        .add_link {
          display: flex;
          align-items: center;
          .link_info {
            margin-left: 10px;
            flex: 1;
            position: relative;
          }
          .info_btn {
            border: 1px dashed #d0d7e0;
            color: #4099ff;
            padding: 8px 80px;
            display: flex;
            align-items: center;
            cursor: pointer;
            width: 30%;
            .iconfont {
              margin-right: 10px;
            }
          }
          .info_detail {
            border: 1px dashed #d0d7e0;
            padding: 8px;
            width: 100%;
            padding-right: 40px;
          }
          .info_del {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 20px;
            color: #999999;
            cursor: pointer;
          }
        }
        .add_bill {
          margin-top: 15px;
          .annex_box {
            border: 1px dashed #d0d7e0;
            margin-top: 15px;
            padding: 10px 20px;
            .annex_li {
              display: flex;
              .annex_label {
                padding-top: 6px;
                width: 80px;
                min-width: 80px;
              }
              .annex_upload {
                flex: 1;
                /deep/.el-image {
                  width: 130px !important;
                  height: 90px !important;
                  .wj_img {
                    width: 130px !important;
                    height: 90px !important;
                  }
                }
              }
            }
          }
        }
        .add_annex {
          display: flex;
          margin-top: 15px;
          .add_label {
            padding-top: 6px;
          }
          .annex_upload {
            flex: 1;
          }
        }
      }
    }
  }
  .btn_save {
    margin-top: 20px;
    text-align: center;
  }
  .size_input {
    ::-webkit-outer-spin-button,
    ::-webkit-inner-spin-button {
      margin: 0;
      -webkit-appearance: none !important;
    }

    input[type='number']::-webkit-outer-spin-button,
    input[type='number']::-webkit-inner-spin-button {
      margin: 0;
      -webkit-appearance: none !important;
    }
  }
}
</style>

<style lang="scss">
.viewer-prev,
.viewer-next {
  display: inline-block !important;
}
</style>
